<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Popcorn Maker</title>

		<style type="text/css">
			table.out { 
				background-color: #fafafa;
				border: 1px #888888 solid;
				border-collapse: collapse;
				border-spacing: 0px;
			}

			table.out th { 
				border: 1px #888888 solid;
				background-color: #eaeaea;
				padding:1px 5px;
			}

			table.out td { 
				border: 1px #888888 solid;
				padding:1px 5px;
			}

			td.idx { 
				color: #777777;
				text-align: right;
			}
			
		</style>

		<script type="text/javascript" src="./lib/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="./src/core.js"></script>
		<script type="text/javascript" src="./src/common.js"></script>
		<script type="text/javascript" src="./src/dictionary.js"></script>
		<script type="text/javascript" src="./src/passwords.js"></script>
		<script type="text/javascript" src="./src/names.js"></script>
		<script type="text/javascript" src="./src/network.js"></script>
		<script type="text/javascript" src="./src/all.js"></script>
		<script type="text/javascript">

			$(document).ready(function() {
				var select = $('#examples');
				$.each(examples, function(index, e) {
					select.append('<option>' + e.title + '</option>');
				});
				select.change(function() {
					var index = select.attr('selectedIndex');
					if (index > 0) {
						$('#input').val(examples[index-1].input);
					}
				});
			});
	
			var examples = [
				{ title 	  : "First generator",
				  input		  : "var toy = {\n" +
								"  name : 'Woody',\n" +
								"  rank : 1,\n" +
								"  type : 'cowboy'\n" +
								" };\n\n" +
								"var generator = {\n" +
								"  name : p.list('Woody', 'Buzz', 'Slinky'),\n" +
								"  rank : p.range(2, 4)\n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy);\n" +
								"// var results = p.circulate(generator, toy);" },
				{ title 	  : "Prepend/append generators",
				  input		  : "var toy = {\n" +
								"  name : 'Woody',\n" +
								"  rank : 1,\n" +
								"  type : 'cowboy'\n" +
								" };\n\n" +
								"var generator = {\n" +
								"  name : p.prepend('Sheriff '),\n" +
								"  type : p.append(' doll'),\n" +
								"  rank : 2\n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy);\n" +
								"// var results = p.circulate(generator, toy);" },
				{ title 	  : "Random generator",
				  input		  : "var toy = {\n" +
								"  name : 'Woody',\n" +
								"  rank : 1,\n" +
								"  type : 'cowboy'\n" +
								" };\n\n" +
								"var generator = {\n" +
								"  name : p.append(p.random().alpha(5)),\n" +
								"  rank : p.random().int(10, 20)\n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy);\n" +
								"// var results = p.circulate(generator, toy);" },
				{ title 	  : "Name generator with chain",
				  input		  : "var toy = {\n" +
								"  name : 'Woody',\n" +
								"  rank : 1,\n" +
								"  type : 'cowboy'\n" +
								" };\n\n" +
								"var randomName = p.chain(p.random().int(), \n" +
								"  function(i) { return p.append('-' + i); });\n\n" +
								"var generator = {\n" +
								"  name : p.repeat(10, randomName)\n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy);\n" +
								"// var results = p.circulate(generator, toy);" },
				{ title 	  : "Dictionary example",
				  input		  : "var toy = {\n" +
								"  name : 'Woody',\n" +
								"  rank : 1,\n" +
								"  type : 'cowboy'\n" +
								" };\n\n" +
								"var generator = {\n" +
								"  name : p.names.list(10),\n" +
								"  type : p.dictionary(['cowboy?',\n" + 
								"                       'action figure?',\n" +
								"                       'Army men?']).element()\n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy);\n" +
								"// var results = p.circulate(generator, toy);" },
				{ title 	  : "Cascading generators",
				  input		  : "var toy = {\n" +
								"  who  : {\n" +
								"           name : 'Woody',\n" +
								"           type : 'cowboy'\n" +
								"         },\n" +
								"  rank : 1\n" +
								" };\n\n" +
								"var generator = {\n" +
								"  who  : {\n" + 
								"           name : p.list('Woody', 'Buzz', 'Slinky')\n" +
								"         },\n" +
								"  rank : p.range(2, 4)\n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy);\n" +
								"// var results = p.circulate(generator, toy);" },
				{ title 	  : "Variables and state",
				  input		  : "var toy = {\n" +
								"  name : 'Woody',\n" +
								"  rank : 1,\n" +
								"  type : 'cowboy'\n" +
								" };\n\n" +
								"var generator = {\n" +
								"  rank : p.setVar('rank', p.random().int(1,5)),\n" +
								"  name : p.withVar('rank', function(r) { return p.append('-' + r); }),\n" +
								"  type : p.withState(function(s) { return p.append(s.type + ' '); })\n" +
								"};\n\n" +
								"var state = { \n" +
								"  type : ' doll' \n" +
								"};\n\n" +
								"var results = p.permutate(generator, toy, -1, state);\n" +
								"// var results = p.circulate(generator, toy, -1, state);" }
			];

			var run_generator = function(input) {
				var output  = $('#output'),
					rc		= $('#result_count'),
					error  	= $('#error');

				// clear output
				output.empty();
				rc.text("");
				error.text("");

				// validate input
				// try {
				  with({ p: Popcorn.All }) {
					eval(input);
				  }
				// } catch(e) {
				//	error.text(e.toString());
				//	return;
				//}

				if (results === undefined) {
					error.text("Missing 'results = permutate(...)' call!");
					return;
				}

				// Print result
				rc.text(results.length + ' result(s): ');

				// Build result table
				if (results.length > 0) {
					var out = ['<table class="out"><thead><tr><th>#</th>'];
          var th = "";
          var names = [];
					for (var name in results[0]) {
						names.push(name);
					}
          names = names.sort().reverse();
					for (var i = 0, l = names.length; i < l; i++) {
						th = '<th>' + names[i] + '</th>' + th; 
					}
          out.push(th);
					out.push('</tr></thead><tbody>');
					for (i = 0, l = results.length; i < l; i++) {
            out.push('<tr><td class="idx">');
            out.push(i + 1);
            out.push('</td>');
            var jl = names.length;
            while(jl--) {
              out.push('<td>');
              out.push(print(results[i][names[jl]]));
              out.push('</td>');
            }
					}
					out.push('</tbody></table>');
					output.append(out.join(''));
				}
			};

      // Helper print function
      var print = function(value) {
        if (Popcorn.Utils.isObject(value)) {
          var out = ['{ '];
          for (var name in value) {
            out.push(name);
            out.push(': ');
            out.push(print(value[name]));
            out.push(', ');
          }
          // return out.splice(out.length - 1, 1, ' }').join('');
          return out.join('');
        }
        return value;
      };

		</script>
	</head>

	<body>
        <h3>Popcorn Maker</h3>

		<table cellpadding="10">
			<tr>
				<td valign="top">
<div>
	Select an example:
		<select id="examples">
			<option>choose one</option>
		</select>
</div>
<div>
	or build a new generator:
</div>
<textarea id="input" rows="25" cols="70">
var toy = {
  name : 'Woody',
  rank : 1,
  type : 'cowboy'
 };

var generator = {
  name : p.list('Woody', 'Buzz', 'Slinky'),
  rank : p.range(2, 4)
};

var results = p.permutate(generator, toy);
// var results = p.circulate(generator, toy);
</textarea>

					<div><a href="javascript:;" onclick="run_generator($('#input').val())">Generate objects</a></div>
					<div id="error" style="color:red;"></div>
				</td>

				<td valign="top">
					<div id="result_count" style="color:green;"></div>
					<div id="output">
					</div>
				</td>
			</tr>
		</table>

	</body>
</html>


